<template>
  <div class="box">
    <div id="myMap1"></div>
    <div id="myMap2"></div>
  </div>
</template>

<script>
import guangzhou from "../../map/baiyunqu.json";
export default {
  data() {
    return {
      gdpersonData: [],
      heatdatas: [
        // {
        //   "0-1000": [],
        // },
        // {
        //   "1000-2000": [
        //     { name: "增城", value: 140, cood: [113.79095, 23.274849] },
        //   ],
        // },
        // {
        //   "2000-3000": [
        //     { name: "从化", value: 330, cood: [113.49095, 23.574849] },
        //   ],
        // },
        {
          "3000-4000": [
            { name: "白云", value: 160, cood: [113.29095, 23.274849] },
          ],
        },
        // {
        //   "4000-5000": [
        //     { name: "天河", value: 110, cood: [113.29095, 23.074849] },
        //   ],
        // },
      ],
    };
  },
  mounted() {
    console.log(guangzhou);
    this.createEchart();
    this.createEchart2();
  },
  methods: {
    createEchart() {
      var vm = this;
      var chartDom = document.getElementById("myMap1");
      var gdchart1 = this.$echarts.init(chartDom);
      gdchart1.hideLoading();
      this.$echarts.registerMap("guangzhou", guangzhou);

      var gdoption = {
        tooltip: {
          trigger: "item",
          padding: [10, 10],
          borderWidth: 1,
          borderColor: "#0b1745",
          backgroundColor: "rgba(1,1,1,0.65)",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          formatter: function (params) {
            // console.log(params.seriesType)
            if (params.seriesType != "map") {
              return (
                '<div style="padding-bottom:5px;">城市：' +
                params.name +
                '</div><div style="padding-bottom:5px;">案件数：' +
                params.value[2] +
                "</div><div>排名：1</div>"
              );
            }
          },
        },
        legend: {
          data: ["4000-5000", "3000-4000", "2000-3000", "1000-2000", "0-1000"],
          right: 200,
          bottom: 200,
          show: false,
          orient: "vertical",
          textStyle: {
            color: "#6d86ab",
            fontsize: "12",
          },
        },
        geo: {
          top: 0,
          left: 470,
          zoom: 1,
          type: "map",
          map: "guangzhou",
        },
        series: [
          {
            top: 0,
            left: 470,
            zoom: 1,
            type: "map",
            map: "guangzhou",
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#d0eaff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#0a2849",
                },
              },
            },
            showLegendSymbol: false,
            itemStyle: {
              normal: {
                areaColor: "#3382dc",
                borderColor: "#eaf2fb",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#42edf8",
                borderColor: "#eaf2fb",
                borderWidth: 1,
              },
            },
            data: vm.gdpersonData,
          },
          // {
          //   name: "0-1000",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: vm.convertData(vm.heatdatas[0]["0-1000"]),
          //   symbolSize: 15,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#4ba9ff",
          //     },
          //   },
          // },
          // {
          //   name: "1000-2000",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: vm.convertData(vm.heatdatas[1]["1000-2000"]),
          //   symbolSize: 15,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#56acf0",
          //     },
          //   },
          // },
          // {
          //   name: "2000-3000",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: vm.convertData(vm.heatdatas[2]["2000-3000"]),
          //   symbolSize: 15,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#bebebe",
          //     },
          //   },
          // },
          {
            name: "3000-4000",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: vm.convertData(vm.heatdatas[0]["3000-4000"]),
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#ffb663",
              },
            },
          },
          // {
          //   name: "4000-5000",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: vm.convertData(vm.heatdatas[4]["4000-5000"]),
          //   symbolSize: 15,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#fd7a7a",
          //     },
          //   },
          // },
        ],
      };

      gdchart1.setOption(gdoption);
      //   $(window).on("resize", gdchart1.resize);

      gdchart1.on("click", function (params) {
        // $(".m1").hide();
        // $(".m0").show();
        // $(".gongcheng").hide();
      });
    },
    createEchart2() {
      var vm = this;
      var chartDom = document.getElementById("myMap2");
      var gdchart2 = this.$echarts.init(chartDom);
      gdchart2.hideLoading();
      this.$echarts.registerMap("guangzhou", guangzhou);

      var gdoption = {
        tooltip: {
          trigger: "item",
          padding: [10, 10],
          borderWidth: 1,
          borderColor: "#0b1745",
          backgroundColor: "rgba(1,1,1,0.65)",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          formatter: function (params) {
            // console.log(params.seriesType)
            if (params.seriesType != "map") {
              return (
                '<div style="padding-bottom:5px;">城市：' +
                params.name +
                '</div><div style="padding-bottom:5px;">案件数：' +
                params.value[2] +
                "</div><div>排名：1</div>"
              );
            }
          },
        },
        legend: {
          data: ["4000-5000", "3000-4000", "2000-3000", "1000-2000", "0-1000"],
          right: 200,
          bottom: 200,
          show: false,
          orient: "vertical",
          textStyle: {
            color: "#6d86ab",
            fontsize: "12",
          },
        },
        geo: {
          top: 0,
          left: 470,
          zoom: 1,
          type: "map",
          map: "guangzhou",
        },
        series: [
          {
            top: 0,
            left: 470,
            zoom: 1,
            type: "map",
            map: "guangzhou",
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#0d3563",
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            showLegendSymbol: false,
            itemStyle: {
              normal: {
                areaColor: "#2b81c5",
                borderColor: "#2b81c5",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#2b81c5",
                borderColor: "#2b81c5",
                borderWidth: 1,
              },
            },
            data: vm.gdpersonData,
          },
          // {
          //   name: "0-1000",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: vm.convertData(vm.heatdatas[0]["0-1000"]),
          //   symbolSize: 15,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#4ba9ff",
          //     },
          //   },
          // },
          // {
          //   name: "1000-2000",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: vm.convertData(vm.heatdatas[1]["1000-2000"]),
          //   symbolSize: 15,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#67ffd6",
          //     },
          //   },
          // },
          // {
          //   name: "2000-3000",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: vm.convertData(vm.heatdatas[2]["2000-3000"]),
          //   symbolSize: 15,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#fde494",
          //     },
          //   },
          // },
          {
            name: "3000-4000",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: vm.convertData(vm.heatdatas[0]["3000-4000"]),
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#fe90bd",
              },
            },
          },
          // {
          //   name: "4000-5000",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: vm.convertData(vm.heatdatas[4]["4000-5000"]),
          //   symbolSize: 15,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#fd2e40",
          //     },
          //   },
          // },
        ],
      };

      gdchart2.setOption(gdoption);
      //   $(window).on("resize", gdchart2.resize);
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = data[i].name;
        if (geoCoord) {
          if (data[i].value) {
            res.push({
              name: data[i].name,
              value: data[i].cood.concat(data[i].value),
            });
          } else {
            res.push({
              name: data[i].name,
              value: data[i].cood,
            });
          }
        }
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  div {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
  }
  #myMap2{
    top: 10px;
    left: 10px;
    z-index: 9;
  }
}
</style>